﻿@page "/gantt-chart/default-functionalities"

@using Syncfusion.Blazor.Gantt
@using ej2_blazor_defaultdata

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This <a target='_blank' href='https://www.syncfusion.com/blazor-components/blazor-gantt-chart'>Blazor Gantt Chart</a> example visualizes the various phases involved in the manufacturing process of a product, which transforms from a conceptual model to a sellable product.</p>
</SampleDescription>
<ActionDescription>
    <p> In this example, you can see how to render a Gantt Chart with the provided data source. The default timeline view week-day mode is applied to Gantt Chart. The dependency lines are enabled in this example to represent the execution order or the hierarchy between the phases.</p>
    <p>Tooltip is enabled for all the UI in this example. To see the tooltip in action, hover the mouse over or tap taskbars, timeline units and dependency lines in touch enabled devices. </p>
</ActionDescription>

<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        <div class="row">
            <SfGantt DataSource="@TaskCollection" Height="450px" Width="100%" HighlightWeekends="true"
                     ProjectStartDate="@ProjectStart" ProjectEndDate="@ProjectEnd">
                <GanttTaskFields Id="TaskId" Name="TaskName" StartDate="StartDate" EndDate="EndDate" Duration="Duration" Progress="Progress"
                                 Dependency="Predecessor" ParentID="ParentId"></GanttTaskFields>
                <GanttLabelSettings LeftLabel="TaskName" TValue="DefaultData.TaskData"> </GanttLabelSettings>
                <GanttSplitterSettings Position="30%"> </GanttSplitterSettings>
            </SfGantt>
        </div>
    </div>
</div>

@code{
    public DateTime ProjectStart = new DateTime(2019, 3, 24);
    public DateTime ProjectEnd = new DateTime(2019, 7, 6);
    public List<DefaultData.TaskData> TaskCollection { get; set; }

    protected override void OnInitialized()
    {
        this.TaskCollection = DefaultData.ProjectNewData();
    }
}
